<script lang="ts" setup>
import { useApplyStore, useAuthStore } from '@/store'

const { sessionid, loginMode } = storeToRefs(useAuthStore())
const applyStore = useApplyStore()

async function goLogin(selectedType: string) {
  if (sessionid.value && loginMode.value === 'apply') {
    // 已登录
    await applyStore.getApplyInfo(selectedType)
  }
  else {
    // 未登录，跳转至登录页
    uni.navigateTo({
      url: `/pages-sub/apply/login?from=select&select=${selectedType}`,
    })
  }
}
</script>

<template>
  <div class="select">
    <div class="top">
      <div class="title">选择商家主体</div>
      <div class="desc">请根据你的证件，选择对应的主体类型</div>
    </div>

    <div class="blocks">
      <div class="block">
        <div class="title">我仅有身份证</div>
        <nut-divider :custom-style="{ color: '#f1f1f1', margin: 0 }" />
        <nut-cell style="margin: 0" title="小微商户" is-link @click="goLogin('3')">
          <template #icon>
            <div class="li-icon" style="color: #ada38d;background-color: #f4f4f4;">
              <div class="i-ri:briefcase-line icon"></div>
            </div>
          </template>
          <template #link>
            <div class="i-ri:arrow-right-s-line rightIcon"></div>
          </template>
        </nut-cell>
      </div>
      <div class="block">
        <div class="title">我有营业执照</div>
        <nut-divider :custom-style="{ color: '#f1f1f1', margin: 0 }" />
        <nut-cell title="个体工商户" is-link @click="goLogin('1')">
          <template #icon>
            <div class="li-icon" style="color: #47a89e;background-color: #e0f2f0;">
              <div class="i-ri:user-2-line icon"></div>
            </div>
          </template>
          <template #link>
            <div class="i-ri:arrow-right-s-line rightIcon"></div>
          </template>
        </nut-cell>
        <nut-divider :custom-style="{ color: '#f1f1f1', margin: 0 }" />
        <nut-cell title="企业" is-link @click="goLogin('2')">
          <template #icon>
            <div class="li-icon" style="color: #c76769;background-color: #fdebea;">
              <div class="i-ri:building-line icon"></div>
            </div>
          </template>
          <template #link>
            <div class="i-ri:arrow-right-s-line rightIcon"></div>
          </template>
        </nut-cell>
      </div>
      <div class="block">
        <div class="title">我有登记证书或其他证件</div>
        <nut-divider :custom-style="{ color: '#f1f1f1', margin: 0 }" />
        <nut-cell title="事业单位" is-link @click="goLogin('4')">
          <template #icon>
            <div class="li-icon" style="color: #5a4ba2;background-color: #f6f4ff;">
              <div class="i-ri:bank-line icon"></div>
            </div>
          </template>
          <template #link>
            <div class="i-ri:arrow-right-s-line rightIcon"></div>
          </template>
        </nut-cell>
        <nut-divider :custom-style="{ color: '#f1f1f1', margin: 0 }" />
        <nut-cell title="政府机关" is-link @click="goLogin('5')">
          <template #icon>
            <div class="li-icon" style="color: #779878;background-color: #ebf2ea;">
              <div class="i-ri:building-2-line icon"></div>
            </div>
          </template>
          <template #link>
            <div class="i-ri:arrow-right-s-line rightIcon"></div>
          </template>
        </nut-cell>
        <nut-divider :custom-style="{ color: '#f1f1f1', margin: 0 }" />
        <nut-cell title="其他组织" is-link @click="goLogin('6')">
          <template #icon>
            <div class="li-icon" style="color: #997d7b;background-color: #f3e9e8;">
              <div class="i-ri:building-4-line icon"></div>
            </div>
          </template>
          <template #link>
            <div class="i-ri:arrow-right-s-line rightIcon"></div>
          </template>
        </nut-cell>
      </div>
    </div>
  </div>
</template>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "商户进件",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
:deep(.nut-cell)
  margin: 0
  box-shadow: none
.select
  .top
    background-color: #fff
    text-align: center
    padding: 30px
    .title
      font-weight: bold
      font-size: 20px
      margin-bottom: 10px
    .desc
      color: #8e8e8e
      margin-bottom: 10px
  .blocks
    background-color: #f1f1f1
    padding: 20px 32rpx 0
    .block
      background-color: #fff
      border-radius: 6px
      margin-bottom: 20px
      .title
        padding: 10px 20px
        font-size: 14px
        color: #8e8e8e

.li-icon
  width: 32px
  height: 32px
  border-radius: 22rpx
  margin-right: 5px
  display: flex
  align-items: center
  justify-content: center
  .icon
    width: 18px
    height: 18px

:deep(.nut-cell)
  padding-bottom: 25rpx
  padding-top: 25rpx 
  font-size: 31rpx
  display: flex
  align-items: center
</style>
